import React, { Component } from 'react';
import * as echarts from 'echarts';
import { Line, Pie } from '@ant-design/charts';
import { ScrollBoard } from '@jiaminghi/data-view-react';
import { connect } from 'umi';

class Pie_Chart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      config: {},
      warningHistory: [],
    }
  }
  componentDidMount() {
    // 当页面组件完全的加载完毕触发此生命周期，只会触发一次
    this.getWarningHistoryInfor();
  }
  // getWaterQualityData() {
  //   const { dispatch } = this.props;
  //   dispatch &&
  //     dispatch({
  //       type: 'warningManage/getWaterQualityData',
  //     });
  // }
  getWarningHistoryInfor() {
    const { dispatch } = this.props;
    dispatch &&
      dispatch({
        type: 'alarmManage/getData',
      });
  }

  render() {
    const { alarmData } = this.props
    alarmData.map((value) => {
      this.state.warningHistory.push([value.cname, value.devicename, value.level]);
    })
    this.state.config = {
      header: ['预警断面名称', '预警设备名称', '报警级别'],
      data: this.state.warningHistory,
      headerHeight: 50,
      hoverPause: true,
      headerBGC: '#263A5A',
    }
    // const { WaterQualityData } = this.props;
    // let waterQualityDatas = [];
    // WaterQualityData.map((value, index) => {
    //   waterQualityDatas.push({ date: value.date, scales: parseInt(value.scales * 100) });
    // });
    // const config = {
    //   appendPadding: 10,
    //   data: waterQualityDatas,
    //   angleField: 'scales',
    //   colorField: 'date',
    //   radius: 0.9,
    //   legend: false,
    //   label: {
    //     type: 'spider',
    //     labelHeight: 28,
    //     content: '{name}\n{percentage}',
    //   },
    //   pieStyle: ({ date }) => {
    //     if (date === 'I类') {
    //       return {
    //         fill: '#84D7AE',
    //       };
    //     }
    //     if (date === 'II类') {
    //       return {
    //         fill: '#40b6ff',
    //       };
    //     }
    //     if (date === 'III类') {
    //       return {
    //         fill: '#FFD700',
    //       };
    //     }
    //     if (date === 'IV类') {
    //       return {
    //         fill: '#FFA500',
    //       };
    //     }
    //     if (date === 'V类') {
    //       return {
    //         fill: '#ff4043',
    //       };
    //     }
    //   },
    //   interactions: [
    //     {
    //       type: 'element-active',
    //     },
    //   ],
    //   smooth: true,
    // };
    return <ScrollBoard config={this.state.config} style={{ marginTop: -30 }} />;
  }
}
export default connect(({ alarmManage }) => ({
  // WaterQualityData: warningManage.WaterQualityData,
  alarmData: alarmManage.alarmData,
}))(Pie_Chart);

